<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style type="text/css">
			.mui-content,
			body {
				background-color: #FFFFFF;
				text-align: center;
			}
			
			span.mui-pull-right {
				position: relative;
				top: 15px;
				right: 15px;
				border: 1px solid #efeff4;
				border-radius: 30px;
				width: 55px;
				height: 26px;
				line-height: 26px;
				font-size: 12px;
			}
			
			ul {
				padding: 0;
				margin-top: 50px;
			}
			
			li {
				text-align: center;
				list-style: none;
				display: inline-block;
				width: 30%;
				margin: 10px 0;
				position: relative;
			}
			
			li img {
				width: 80%;
				border-radius: 50%;
			}
			
			li i.iconfont {
				display: none;
				position: absolute;
				right: 6%;
				bottom: 25%;
				color: #f6047f;
				width: 30px;
				height: 30px;
				font-size: 22px;
			}
			
			li span {
				display: block;
				font-size: 14px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的关注</h1>
		</header>
		<div class="mui-content">
			<span class="mui-pull-right">全选</span>
			<ul>
				<li id="1">
					<img src="../images/icon/artshow/yanchanghui.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						搬家
					</span>
				</li>
				<li id="2">
					<img src="../images/icon/artshow/yinyuejie.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
					    保姆
					</span>
				</li>
				<li id="3">
					<img src="../images/icon/artshow/jiuba.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						维修
					</span>
				</li>
				<li id="4">
					<img src="../images/icon/artshow/zhuchang.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						摄影
					</span>
				</li>
				<li id="5">
					<img src="../images/icon/artshow/canting.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						婚庆
					</span>
				</li>
				<li id="6">
					<img src="../images/icon/artshow/kaiye.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						送餐
					</span>
				</li>
				<li id="7">
					<img src="../images/icon/artshow/nianhui.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						服务员
					</span>
				</li>
				<li id="8">
					<img src="../images/icon/artshow/shengri.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						会场布置
					</span>
				</li>
				<li id="9">
					<img src="../images/icon/artshow/hunli.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						司仪驻唱
					</span>
				</li>
				<li id="10">
					<img src="../images/icon/artshow/paishe.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						礼仪模特
					</span>
				</li>
				<li id="11">
					<img src="../images/icon/artshow/luzhi.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						传单派发
					</span>
				</li>
				<li id="12">
					<img src="../images/icon/artshow/xuanchuanpian.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						游戏代练
					</span>
				</li>
				<li id="13">
					<img src="../images/icon/artshow/peixun.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						代驾
					</span>
				</li>
				<li id="14">
					<img src="../images/icon/artshow/juchang.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						代购
					</span>
				</li>
				<li id="15">
					<img src="../images/icon/artshow/huzhu.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						同城跑腿
					</span>
				</li>
				<li id="16">
					<img src="../images/icon/artshow/daiyan.jpg" />
					<i class="iconfont">&#xe60d;</i>
					<span class="classtext">
						更多帮办
					</span>
				</li>
			</ul>
			<button class="mui-btn btn-main btn-block" type="button" data-loading-text = "正在修改">修改</button>
		</div>
		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				var $selectAll = $("span.mui-pull-right");
				var $icons = $("i.iconfont"), $items = $("li");
				var url = baseURL + 'userSub/getByUser/23/token.json';
				Common.ajax({
					url : url
				}, function(data) {
					console.log(JSON.stringify(data));
					for(var i = 0; i < data.length; i++) {
						if(data[i].subState) {
							$("#" + data[i].pid).find('i').show();
						}
					}
					changeSelected();
				}, function(xhr) {
					mui.toast('网络异常，请稍后再试');
					console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
				})
				
				$selectAll.click(function() {
					if($(this).html() == '全选') {
						$icons.show();
						$(this).html('全不选');
					} else {
						$icons.hide();
						$(this).html('全选');
					}
				})
	
				$items.click(function() {
					$(this).find('i').toggle();
					changeSelected();
				})
	
				mui('.mui-content').on('tap', 'button', function() {
					var self = this;
					mui(self).button('loading');
					var arr = [];
					$items.each(function() {
						var item = {
							pid: 0,
							subState: 0,
							uid: ''
						}
						item.pid = this.id;
						item.subState = $(this).find('i').is(':visible') ? 1 : 0;
						item.uid = '23';
						arr.push(item);
					});
					var url = baseURL + 'userSub/updateSubAllByUser/23/token.json?result=' + escape(JSON.stringify(arr));
					console.log(url);
					Common.ajax({
						url : url
					}, function(data) {
						mui(self).button('reset');
						console.log(JSON.stringify(data));
						mui.toast('修改成功');
						mui.back();
					}, function(xhr) {
						mui(self).button('reset');
						mui.toast('网络异常，请稍后再试');
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				})
				
				function changeSelected() {
					var allSelected = true;
					$icons.each(function() {
						if($(this).is(':hidden')) {
							allSelected = false;
						}
					})
					if(allSelected) {
						$selectAll.html('全不选');
					} else {
						$selectAll.html('全选');
					}
				}
			})
		</script>
	</body>

</html>